<template>
  <view class="yskgr-page">
    <view class="shareholders-list">
      <view
        class="shareholder-item"
        v-for="(shareholder, index) in shareholders"
        :key="index"
      >
        <view class="avatar">
          <text class="avatar-text">{{
            shareholder?.stockName?.charAt(0)
          }}</text>
        </view>
        <view class="shareholder-info">
          <view class="name">{{ shareholder?.stockName }}</view>
          <view class="share-ratio">
            <text class="share-ratio-text">持股比例: </text>
            {{ (shareholder?.stockPercent * 100).toFixed(2) }}%
          </view>
        </view>
      </view>
    </view>
    <view class="loading-status" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    <view class="no-more" v-if="!hasMore">
      <text class="no-more-text">没有更多数据了</text>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

const shareholders = reactive([])
const loading = ref(false)
const hasMore = ref(true)
const params = reactive({
  creditcode: '',
  category: '03',
  pageNum: 1,
  pageSize: 10,
})

const getShareholders = async (isLoadMore = false) => {
  if (loading.value) return
  loading.value = true
  try {
    const res = await uni.request({
      url: 'https://apizx01.sc798.com/api/proxy/enterprise/basic/basic',
      method: 'POST',
      data: params,
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
    })
    if (res.data.code === 200) {
      const newData = res.data.rows || []
      if (isLoadMore) {
        shareholders.push(...newData)
      } else {
        shareholders.splice(0, shareholders.length, ...newData)
      }
      hasMore.value = newData.length === params.pageSize
      if (newData.length < params.pageSize) {
        hasMore.value = false
      }
    } else {
      uni.showToast({
        title: res.data.msg,
        icon: 'none',
      })
    }
  } catch (err) {
    console.error('请求失败:', err)
    uni.showToast({
      title: '网络请求失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}
const loadMore = async () => {
  if (!hasMore.value || loading.value) return
  params.pageNum++
  await getShareholders(true)
}

onReachBottom(() => {
  loadMore()
})

onLoad(async (options) => {
  params.creditcode = options?.creditcode
  params.pageNum = 1
  hasMore.value = true
  await getShareholders()
})
</script>

<style lang="scss" scoped>
.yskgr-page {
  min-height: 100vh;
  background-color: #f2f4f8;
  padding: 30rpx;
  box-sizing: border-box;
  .shareholders-list {
    .shareholder-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx 50rpx;
      margin-bottom: 25rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
      }
      .avatar {
        width: 62rpx;
        height: 62rpx;
        background-color: #2b6fea;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24rpx;
        .avatar-text {
          color: #fff;
          font-size: 30rpx;
        }
      }
      .shareholder-info {
        flex: 1;
        .name {
          font-size: 30rpx;
          margin-bottom: 8rpx;
        }
        .share-ratio {
          font-size: 24rpx;
          .share-ratio-text {
            color: #9b9b9b;
          }
        }
      }
    }
  }
  .loading-status {
    text-align: center;
    padding: 30rpx;
    .loading-text {
      color: #999;
      font-size: 28rpx;
    }
  }
  .no-more {
    text-align: center;
    padding: 30rpx;
    .no-more-text {
      color: #ccc;
      font-size: 26rpx;
    }
  }
}
</style>
